<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsx语法规则</title>
    <style>
      .title {
        background-color: blueviolet;
        color: coral;
      }
    </style>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      const id = "atGuigU";
      const date = "HeLlo,ReAct";

      const VDOM = (
        <div>
          <h1 className="title">
            <span
              id={id.toLowerCase()}
              style={{ color: "white", fontSzie: "30px" }}
            >
              {date.toLowerCase()}
            </span>
          </h1>
          <h1 className="title">
            <span
              id={id.toUpperCase()}
              style={{ color: "white", fontSzie: "30px" }}
            >
              {date.toUpperCase()}
            </span>
          </h1>
        </div>
      );

      ReactDOM.render(VDOM, document.getElementById("test"));

      /*
        jsx语法规则:
         1.定义虚拟DOM时,不要写引号;
         2.标签中引入js表达式时要用{};
         3.样式的类名要用className;
         4.内联样式需要用style={{key:value}}的形式;
         5.虚拟DOM必须只有一个根标签;
         6.标签必须闭合;
         7.标签首字母:
			(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
			(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
        */
    </script>
  </body>
</html>
